<!--
 * @Author: Why so serious my dear 854059946@qq.com
 * @Date: 2023-07-06 20:20:29
 * @LastEditors: Why so serious my dear 854059946@qq.com
 * @LastEditTime: 2023-07-10 17:21:16
 * @FilePath: /used-idle/subPages/product/product.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view>
    <u-tabs
      :list="list2"
      :activeStyle="{ color: '#4EA4FB' }"
      @click="clickTabs"
    ></u-tabs>
    <helang-waterfall-list
      :status="waterfall.status"
      :list="waterfall.list"
      :reset="waterfall.reset"
      @click="onClick"
      @done="onDone"
    >
      <template>
        <view v-if="waterfall.status == 'await'">
          <view class="load-txt">上拉加载更多</view>
        </view>
        <view v-else-if="waterfall.status == 'loading'">
          <view class="load-txt">加载中</view>
        </view>
        <view v-else-if="waterfall.status == 'success'">
          <view class="load-txt">加载中</view>
        </view>
        <view v-else-if="waterfall.status == 'finish'">
          <view class="load-txt">没有更多了</view>
        </view>
        <view v-else-if="waterfall.status == 'fail'">
          <image
            class="load-icon"
            src="../../static/waterfall/fail.png"
          ></image>
          <view class="load-txt">出错了，请刷新重试</view>
        </view>
        <view v-else-if="waterfall.status == 'empty'">
          <image
            class="load-icon"
            src="../../static/waterfall/empty.png"
          ></image>
          <view class="load-txt">暂无数据</view>
        </view>
        <view v-else
          ><!-- 别问我为什么要写一个 v-else 的空 view,不写H5平台就会有CSS生效的离谱BUG --></view
        >
      </template>
    </helang-waterfall-list>

    <view class="status-change" @tap="onStatusChange">
      <view>切换<br />状态</view>
    </view>
  </view>
</template>

<script>
import helangWaterfallList from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list";

// 列表接口模拟数据
import mockData from "@/uni_modules/helang-waterfall/mock-data/waterfall-list.js";

export default {
  components: {
    "helang-waterfall-list": helangWaterfallList,
  },
  data() {
    return {
      // 异步请求相关
      ajax: {
        // 是否可以加载
        load: true,
        // 每页的请求条件
        rows: 10,
        // 页码
        page: 1,
        // 数据列表
        dataList: [],
      },
      // 瀑布流组件相关
      waterfall: {
        status: "",
        reset: false,
        list: [],
      },
      list2: [
        {
          name: "关注",
        },
        {
          name: "推荐",
        },
        {
          name: "电影",
        },
        {
          name: "科技",
        },
        {
          name: "音乐",
        },
        {
          name: "美食",
        },
        {
          name: "文化",
        },
        {
          name: "财经",
        },
        {
          name: "手工",
        },
      ],
    };
  },
  onReady() {
    this.getList();
  },
  // 触底触发
  onReachBottom() {
    this.getList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    // 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
    setTimeout(() => {
      this.ajax.page = 1;
      this.ajax.load = true;
      this.getList();
    }, 800);
  },
  methods: {
    // 瀑布流组件点击事件
    onClick(data, index, tag) {
      console.log(data);
      // let direction = {
      //   left: "左",
      //   right: "右",
      // };
      // uni.showToast({
      //   title: `${direction[tag]}侧列表第${index + 1}个被点击`,
      //   icon: "none",
      // });
      uni.navigateTo({
        url: data.path,
      });
    },
    // 瀑布流组件渲染完成
    onDone() {
      // 设置组件为 非重置，这行代码保留不删即可
      this.waterfall.reset = false;

      // 恢复 getList 方法的调用
      this.ajax.load = true;
      this.ajax.page++;

      // 设置组件状态为 等待加载
      this.waterfall.status = "await";

      /**
       * 如果你是一个追求完美的开发者，可以通过判断当前数据的长度和请求的数据长度来优化前端请求，减少不必要请求
       * 不需要则删除
       * */
      /**
				if(this.ajax.dataCount >= this.ajax.rows){
					this.ajax.load = true;
					this.ajax.page++;
				}
				*/
    },
    // 获取数据
    getList() {
      if (!this.ajax.load) {
        return;
      }
      this.ajax.load = false;

      // 设置状态为加载中
      this.waterfall.status = "loading";

      // 请求数据， mockData.getList 示例一个 ajax 请求
      mockData
        .getList({
          pageNum: this.ajax.page,
          pageSize: this.ajax.rows,
        })
        .then((res) => {
          // 获取到的数据，请注意数据结构
          console.log(res);

          // 第一页数据执行以下代码
          if (this.ajax.page == 1) {
            // 关闭下拉
            uni.stopPullDownRefresh();

            // 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
            this.waterfall.reset = true;
          }

          // 数据无效时处理
          if (!res || res.length < 1) {
            // 设置组件为 加载结束 状态
            this.waterfall.status = "finish";
            return;
          }

          // 将数据赋值给瀑布流 list 属性
          this.waterfall.list = res;
          // 设置组件为 加载成功 状态，此时瀑布流组件开始计算当前数据的布局
          this.waterfall.status = "success";

          /**
           * 下方的代码为扩展其他功能的示例代码 可做参考，不需要可删除
           * */

          // 缓存当前数据给其他需要该数据的功能使用
          if (this.ajax.page == 1) {
            this.ajax.dataList = res;
          } else {
            this.ajax.dataList = [...this.ajax.dataList, ...res];
          }
          // 记录本次数据长度，意义请看 done 事件的回调
          this.ajax.dataCount = res.length || 0;

          // 。。。下面不需要写代码了，等待组件渲染完成
        });
    },
    // 导航状态切换演示监听
    onStatusChange() {
      uni.showActionSheet({
        itemList: ["常规", "加载异常", "加载错误"],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.ajax.page = 1;
              this.ajax.load = true;
              this.getList();
              break;
            case 1:
              // alert(111)
              this.waterfall.status = "fail";
              break;
            case 2:
              this.waterfall.status = "empty";
              break;
            default:
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f3f3f3;
}

.load-txt {
  padding: 0 0 20rpx 0;
  text-align: center;
  color: #999;
  font-size: 24rpx;
}

.load-icon {
  width: 300rpx;
  height: 300rpx;
  margin: 0 auto 20rpx auto;
  display: block;
}

.status-change {
  position: fixed;
  right: 10rpx;
  top: 60%;
  width: 80rpx;
  height: 80rpx;
  z-index: 100;
  font-size: 24rpx;
  border-radius: 50%;
  background-color: #0089ff;
  color: #fff;
  line-height: 1;
  opacity: 0.33;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
</style>